<!DOCTYPE html>
<html>
<head>
	<title>mapshaper</title>
	<meta name="Description" content="A tool for topologically aware shape simplification. Reads and writes Shapefile, GeoJSON and TopoJSON formats.">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="page.css">
	<link rel="stylesheet" href="elements.css">
	<link rel="icon" type="image/png" href="images/icon.png">
</head>
<body>
<div class="hidden">
	<svg version="1.1" id="home-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" width="14px" height="19px" viewBox="0 0 14 16">
	<g>
		<polygon points="13,7 13,6 12,6 12,5 11,5 11,4 10,4 10,3 9,3 9,2 8,2 8,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,5 2,5 
			2,6 1,6 1,7 0,7 0,9 2,9 2,14 6,14 6,10 8,10 8,14 12,14 12,9 14,9 14,7"/>
	</g>
	</svg>

	<svg version="1.1" id="zoom-in-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" width="14px" height="21px" viewBox="0 0 14 14">
	<g>
		<polygon points="13,5 9,5 9,1 5,1 5,5 1,5 1,9 5,9 5,13 9,13 9,9 13,9"/>
	</g>
	</svg>

	<!-- adjusted height -->
	<svg version="1.1" id="zoom-out-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" width="14px" height="16px" viewBox="0 -1 14 10">
	<g>
		<polygon points="1,1 13,1 13,5 1,5 1,1" />
	</g>
	</svg>

	<!-- adjusted height -->
	<svg id="pointer-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="22" viewBox="0 0 15 20"><rect x="7.4126" y="11.0354" width="3.9102" height="7.9841" transform="translate(-5.8889 6.0377) rotate(-27.5536)" fill="#30d4ef"/><polygon points="2.57 2.086 2.718 16.056 13.944 10.198 2.57 2.086" fill="#30d4ef"/></svg>

	<!-- adjusted height -->
	<svg id="ribbon-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="15" height="25" viewBox="0 1 15 20">
	  <polygon points="8 14.5 13 19 13 4 3 4 3 19 8 14.5" fill="#30d4ef"/>
	</svg>
 
  <defs>
    <style>
      .cls-1 {
        fill: #0c0a0a;
      }
    </style>
  </defs>
  <g id="left_arrow">
    <polygon class="cls-1" points="0.5 6 6.5 11.5 6.5 0.5 0.5 6"/>
  </g>
</svg>

<svg id="info-menu-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12">
  <g id="left_arrow">
    <polygon class="cls-1" points="0.5 6 6.5 11.5 6.5 0.5 0.5 6"/>
  </g>
</svg>

</div>

<div class="page-header">
	<div class="mapshaper-logo">map<span class="logo-highlight">shaper</span></div>

	<div class="layer-control-btn"><span class="btn header-btn layer-name"></span></div>

	<div class="simplify-control-wrapper"><div class="simplify-control"><div class="header-btn btn simplify-settings-btn">Settings</div>
		<div class="slider">
			<div class="handle"><img src="images/slider_handle_v1.png" alt=""/></div>
			<div class="track"></div>
		</div>
		<input type="text" value="label" class="clicktext" />
	</div></div>
	<div id="mode-buttons" class="page-header-buttons">
		<span class="console-btn header-btn btn">Console</span><span class="basemap-btn header-btn btn">Basemap</span><span class="separator"></span><span class="separator"></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span>
	</div>
	<div id="splash-buttons" class="page-header-buttons">
		<a href="https://github.com/mbloch/mapshaper/wiki"><span id="wiki-btn" class="header-btn btn">Wiki</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a>
	</div>
</div>

<div id="mshp-not-supported" class="main-area">
	<div class="info-box">
	<h3>Unfortunately, mapshaper can't run in <span class="unsupported-browser">this web browser</span></h3>
	<div>For best results, try <a href="https://www.google.com/chrome/browser/desktop/">Google Chrome</a> or <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>.</div>
	</div>
</div>

<div class="layer-control main-area popup-dialog">
	<div class="info-box">
		<div class="info-box-scrolled">
		<div class="layer-menu">
			<h3>Layers</h3>
			<div class="pin-all pinnable">
				<img class="eye-btn black-eye" src="images/eye.png">
				<img class="eye-btn green-eye" src="images/eye2.png">
			</div>
			<div class="layer-list"></div>
			<!-- <h4>Sources</h4> -->
			<div class="no-layer-note">No data has been added</div>
			<div class="source-file-section">
				<h4>Source files</h4>
				<div class="file-list"></div>
			</div>
			<div>
				<div id="add-file-btn" class="dialog-btn btn">Add files</div>
				<div id="add-empty-btn" class="dialog-btn btn">Add empty layer</div>
			</div>
		</div>
		</div>
	</div>
</div>


<div class="box-tool-options sidebar-buttons">
	<div>
		<div class="select-btn btn sidebar-btn">Select</div>
		<div class="clip-btn btn sidebar-btn">Clip</div>
		<div class="erase-btn btn sidebar-btn">Erase</div>
		<div class="rect-btn btn sidebar-btn">Rectangle</div>
		<div class="frame-btn btn sidebar-btn">Frame</div>
		<div class="info-btn btn sidebar-btn">Bounds</div>
		<div class="box-coords selectable"></div>
		<div class="cancel-btn btn sidebar-btn">Cancel</div>
	</div>
</div>

<div class="selection-tool-options sidebar-buttons">
	<div>
		<div class="delete-btn btn sidebar-btn">Delete</div>
		<div class="filter-btn btn sidebar-btn">Keep</div>
		<div class="duplicate-btn btn sidebar-btn">Duplicate</div>
		<div class="split-btn btn sidebar-btn">Split</div>
		<div class="coords-btn btn sidebar-btn toggle-btn">Bounds</div>
		<div class="box-coords selectable"></div>
		<div class="data-btn btn sidebar-btn toggle-btn">Edit data</div>
		<div class="cancel-btn btn sidebar-btn">Clear</div>
	</div>
</div>

<div class="export-options main-area popup-dialog">
	<div class="info-box">
		<div class="close2-btn"></div>
		<h3>Export options</h3>
		<div class=export-layers>
			<h4 class="menu-title">Layers</h4>
			<div class="export-layer-list option-menu"></div>
		</div>
		<div class="export-zip-option option-menu">

		<div style="height:6px"></div>

		</div>
		<h4>File format</h4>
		<div class="export-formats option-menu">
		</div>

		<div style="height:11px"></div>

		<div class="option-menu"><input type="text" class="text-input advanced-options" placeholder="command line options" />
		<a href="https://github.com/mbloch/mapshaper/wiki/Command-Reference#-o-output" target="_mapshaper_output_docs">
			<div class="tip-button">?<div class="tip-anchor">
		<div class="tip">Enter options from the command line interface for
the -o command. Examples: bbox no-quantization
precision=0.001. Click to see all options.</div></div></div></a>

	<!-- 	<div class="option-menu">
	<input id="ofile-name" class="text-input" type="text" placeholder="output file name" />
	</div> -->
		<div><span id="save-preference" style="display: none;"><input type="checkbox"/>choose output directory</span></div>
		<div><span id="save-to-clipboard" style="display: inline-block;"><input type="checkbox"/>save to clipboard</span></div>
		</div>
		<div id="export-btn" class="btn dialog-btn" style="margin-top: 4px;">Export</div>

	</div>
</div>

<div class="basemap-options main-area popup-dialog">
	<div class="info-box">
		<div class="close2-btn"></div>
		<h3>Basemap options</h3>
		<p class="basemap-note"></p>
		<p class="basemap-warning"></p>
		<div class="basemap-styles basemap-buttons"></div>
		<div>
			<!-- <div class="close-btn btn dialog-btn">Close</div> -->
			<div class="clear-btn btn dialog-btn disabled">Clear</div>
			<div class="fade-btn btn dialog-btn disabled">Fade</div>
			<!-- <div class="hide-btn btn dialog-btn disabled">Hide</div> -->
		</div>
	</div>
</div>

<div class="simplify-options main-area popup-dialog">
	<div class="info-box">
		<div class="close2-btn"></div>
		<h3>Simplification</h3>
		<div class="option-menu">
			<div><label for="import-retain-opt"><input type="checkbox" class="checkbox import-retain-opt"/>prevent shape removal</label>
							<div class="tip-button">?<div class="tip-anchor">
			<div class="tip">Prevent small polygon features from
disappearing at high simplification. Keeps
the largest ring of multi-ring features.
</div></div></div></div>
			<div class="planar-opt-wrapper"><label for="planar-opt"><input type="checkbox" class="checkbox planar-opt"/>use planar geometry</label>
							<div class="tip-button">?<div class="tip-anchor">
			<div class="tip">Treat x, y values as Cartesian coordinates
on a plane, rather than as longitude, latitude
coordinates on a sphere.
</div></div></div></div>
		</div>

			<h4>Method</h4>
			<div class="option-menu">

			<div><label><input type="radio" name="method" value="dp" class="radio">Douglas-Peucker</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Simplified lines remain within a set
distance of original lines. Good for
thinning dense points, but spikes
tend to form at high simplification.</div></div></div>
			</div>			

			<div><label><input type="radio" name="method" value="visvalingam" class="radio">Visvalingam / effective area</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Lines are simplified by iteratively
removing the point that forms
the least-area triangle with two
adjacent points.</div></div></div>
			</div>

			<div><label><input type="radio" name="method" value="weighted_visvalingam" class="radio">Visvalingam / weighted area</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Points located at the vertex
of more acute angles are
preferentially removed, for
a smoother appearance.</div></div></div></div>


		</div> <!-- option menu -->

		<div>
<!-- 			<div class="cancel-btn btn dialog-btn">Cancel</div> -->
			<div class="submit-btn btn dialog-btn">Apply</div>
		</div>
	</div> <!-- .info-box -->
</div> <!-- simplify-options -->

<div id="import-options" class="main-area popup-dialog">
	<div class="info-box">
		<div class="cancel-btn close2-btn"></div>
		<h3 class="list-header">Import files</h3>
		<div class="import-instructions">
			<span><input type="checkbox" class="advanced-import-options" />with advanced options</span>
			<div class="mini-drop-area">
				<div class="subtitle">Drop, paste or <span class="add-btn inline-btn btn"><span class="label-text">select</span></span> files to import.</div>
				<div class="subtitle">Shapefile, GeoJSON, TopoJSON, KML and CSV formats are supported. Files can be zipped or gzipped.</div>
			</div>
		</div>
		<div class="queued-file-section">
			<!-- <h4>Files</h4> -->
			<div class="dropped-file-list"></div>
			
			<div class="option-menu">

			<div id="path-import-options">
				<!-- <h4>Options</h4> -->
			</div>

			<div style="margin-top: 10px"><input type="text" class="text-input advanced-options" placeholder="import options" />
				<a href="https://github.com/mbloch/mapshaper/wiki/Command-Reference#-i-input" target="_mapshaper_import_docs">
				<div class="tip-button">?<div class="tip-anchor">
	<div class="tip">Enter options from the command line
interface. Examples: <span id="import-option-examples">snap no-topology
encoding=big5</span>. Click to see all options.</div></div></div></div>
			</a>

			</div>

	<!-- 			<div class="cancel-btn btn dialog-btn">Cancel</div>
				<div class="add-btn btn dialog-btn">Select</div> -->
				<div class="submit-btn btn dialog-btn default-btn disabled">Submit</div>

		</div>

	</div> <!-- .info-box -->
</div> <!-- import-options -->

<!-- TODO: remove #mshp-main-page without causing the map to jitter when resized -->
<div id="mshp-main-page">

	<div class="console main-area console-area">
		<div class="console-window"><div class="console-buffer selectable"></div></div>
	</div>
	<div class="mshp-main-map main-area map-area">
		<div class="intersection-display">
			<span class="intersection-check text-btn colored-text">Check line intersections</span><span class="intersection-count">0 line intersections</span>
			<img class="close-btn" draggable="false" src="images/close.png">
			<div class="repair-btn text-btn colored-text">Repair</div>
		</div>
		<div class="basemap-overlay-buttons basemap-buttons"></div>
		<div class="map-layers"></div>
		<div class="basemap-container"><div class="basemap"></div></div>
	</div>
</div>

<div id="import-options-drop-area" class="main-area drop-area-wrapper hidden"> 
<div class="drop-area"></div>
</div>

<script src="basemap.js" type="text/javascript"></script>
<script src="modules.js" type="text/javascript"></script>
<script src="mapshaper.js" type="text/javascript"></script>
<script src="manifest.js" type="text/javascript"></script>
<script src="mapshaper-gui.js" type="text/javascript"></script>
</body>
</html>